<template>
  <div class="calendar">
    <el-calendar>
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <div :class="data.isSelected ? 'is-selected' : ''" class="item">
          <p class="flex_row_between" @click.stop="create(data.day)">
            <span>{{ data.day.split('-').slice(1).join('-') }}</span>
            <span class="iconfont icon-tianjia" v-if="data.isSelected"></span>
          </p>
          <div class="list" v-if="data.isSelected&&list.length>=3">
            <schedule :list='list' :time='data.day' @editItem='editItem' @delItem='delItem'></schedule>
          </div>
          <div v-if="data.isSelected&&list.length<3">
            <schedule :list='list.slice(0,2)' @editItem='editItem' @delItem='delItem'></schedule>
          </div>
        </div>
      </template>
    </el-calendar>
    <el-dialog title="新建日程" :visible.sync="dialogFormVisible" width="550px">
      <el-form :model="form" label-width="80px" size="mini" ref="ruleForm" :rules="rules">
        <el-form-item label="标题" prop='title'>
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="startTime">
          <el-date-picker
            style="width:130px"
            v-model="form.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
          <span class="line">-</span>
          <el-date-picker
            v-model="form.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            style="width:130px"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="参与者" prop='user'>
          <el-select v-model="form.user" placeholder="请选择参与者">
            <el-option label="参与者一" value="1"></el-option>
            <el-option label="参与者二" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="form.note" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="hide">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import schedule from '@/components/schedule'
export default {
  components:{
    schedule
  },
  data() {
    return {
      list:[
        {
          id:1,
          title:'aaa',
          startTime:'2021-10-20 10:00:00',
          endTime:'2021-10-20 20:00:00',
          user:'丽丽',
          note:'备注内容'
        },
        {
          id:12,
          title:'aaa',
          startTime:'2021-10-20 10:00:00',
          endTime:'2021-10-20 20:00:00',
          user:'丽丽',
          note:'备注内容'
        },
        // {
        //   id:13,
        //   title:'aaa',
        //   startTime:'2021-10-20 10:00:00',
        //   endTime:'2021-10-20 20:00:00',
        //   user:'丽丽',
        //   note:'备注内容'
        // }
      ],
      dialogFormVisible:false,
      form:{
        title:'',
        startTime:'',
        endTime:'',
        user:'',
        note:'',
      },
      date:'',
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        user: [
          { required: true, message: '请选择参与者', trigger: 'change' }
        ]
      },
    }
  },
  methods:{
    create(val) {
      this.dialogFormVisible = true
      this.form.startTime = val
      this.form.endTime = val
      this.isShow = false
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.list.push({
            id:this.list.length+1,
            title:this.form.title,
            startTime:this.form.startTime,
            endTime:this.form.endTime,
            user:this.form.user,
            note:this.form.note
          })
          this.hide()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    editItem(item) {
      for(let key in this.form) {
        this.form[key] = item[key]
      }
      this.dialogFormVisible = true
    },
    delItem(index) {
      this.list.splice(index,1)
    },
    hide() {
      for(let key in this.form) {
        this.form[key] = ''
      }
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/stylus/variable'
.line
  margin: 0 10px
.icon-tianjia
  font-size 20px
.item
  position relative
  .list
    position: absolute
    left 0
    top 0
    z-index: 99
    width 150px
    max-height: 200px
    background: #fff
    border 1px solid #eee
    padding 10px
    border-radius: 4px
    overflow-y: auto
</style>